
var path = require('path')

var htmlWebpackPlugin = require('html-webpack-plugin')
let VueLoaderPlugin = require('vue-loader/lib/plugin');


module.exports = {
    entry: path.join(__dirname,'./src/main.js'),// 入口 ，表示，要使用webpack 打包哪个文件
    output:{ //输出文件的相关配置
        path:path.join(__dirname,'./dist'), //指定打包好的文件，输出到哪个目录中去
        filename:'bundle.js' //这是指定输出的文件的名称
    },
    plugins:[ //配置插件的节点
        // new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象，这是启用热更新的第三步
        new VueLoaderPlugin(), //在plugins里new实例
        new htmlWebpackPlugin({//这是创建一个在内存中生成html页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定页面路径，去生成内存中的页面
            filename:'index.html' //这是指定生成页面的名称
        })
    ],
    module:{//这个节点，用于配置所有的第三方模块加载器
        rules:[ //所有第三方模块的规则
           { test:/\.css$/,use:['style-loader','css-loader'] },//配置处理.css文件的第三方loader规则
           { test:/\.less$/,use:['style-loader','css-loader','less-loader'] },//这是配置处理.less的第三方loader规则
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] },//这是配置处理.scss的第三方loader规则
            { test:/\.(jpg|png|gif|bmp|jpeg)$/,use:[{loader:'file-loader?limit=7630&name=[hash:8]-[name].[ext]',options:{esModule:false}}] },//这是配置处理图片url的第三方loader规则
            { test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader' },//处理字体文件的loader
            { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ },
            { test:/\.vue$/, use: 'vue-loader' }, //处理.vue文件的loader
        ]
    },
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
        //   "vue$": "vue/dist/vue.js"
        }
    }
}